<!doctype html>
<html lang="en">
  <head>
    <title>Netlify Functions Examples</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500|Roboto+Mono" rel="stylesheet">
    <link href="/normalize.css" rel="stylesheet">
    <link href="/styles.css" rel="stylesheet">
  </head>
  <body>
    <h1>Netlify Functions Examples</h1>
    <p>
      Hi there! This is a playground to test out
      <a href="https://www.netlify.com/docs/functions">Netlify’s Lambda Functions</a>.
    </p>
    <p>
      You can browse the code for this site on
      <a href="https://github.com/imorente/netlify-functions-example">GitHub</a>,
      or play around with the code yourself
      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/imorente/netlify-functions-example">
      deploying a copy to Netlify</a>.
    </p>
    <article>
      <h2>Hello, World!</h2>
      <p>The inevitable Hello World example.</p>
      <pre class="language-js"><code><%= require('html-loader!./lambda/hello.js') %></code></pre>
      <h3>Try it out</h3>
      <p><a href="/.netlify/functions/hello">Say hello!</a></p>
    </article>

    <article>
      <h2>Hello, World! (async version)</h2>
      <p>
        The Hello World example can get sweeter with some async syntactic sugar.
        With async, we can return the response instead of dealing with callbacks.
      </p>
      <pre class="language-js"><code><%= require('html-loader!./lambda/hello_async.js') %></code></pre>
      <h3>Try it out</h3>
      <p><a href="/.netlify/functions/hello_async">Say hello!</a></p>
    </article>

    <article>
      <h2>Hello, {name}</h2>
      <p>
        Customize the greeting calling the Lambda endpoint with an optional
        <code>name</code> parameter.
      </p>
      <pre class="language-js"><code><%= require('html-loader!./lambda/hello_name.js') %></code></pre>
      <h3>Try it out</h3>
      <form action="/.netlify/functions/hello_name">
        <p>
          <label>What’s your name?<br/><input type="text" name="name"></label>
        </p>
        <p><button type="submit">Say hello!</button></p>
      </form>
    </article>

    <article>
      <h2>Hello, {name} (POST version)</h2>
      <p>Let’s make sure we only process POST requests for our customized greeting.</p>
      <pre class="language-js"><code><%= require('html-loader!./lambda/hello_name_post.js') %></code></pre>
      <h3>Try it out</h3>
      <form action="/.netlify/functions/hello_name_post" method="POST">
        <p>
          <label>What’s your name?<br/><input type="text" name="name"></label>
        </p>
        <p><button type="submit">Say hello!</button></p>
      </form>
      <p><a href="/.netlify/functions/hello_name_post?name=Me">Show me the error</a></p>
    </article>

    <article>
      <h2>Read environment variables</h2>
      <p>
        Storing secrets like API tokens can be tricky in web apps.
        Lambdas and environment variables to the rescue!
      </p>
      <p>
        For this example, I’m using
        <a href="https://www.npmjs.com/package/dotenv">dotenv</a>
        to define environment variables locally (in a real project, I wouldn’t
        commit that file to the repository!), and defining those same variables
        in the Netlify site dashboard under
        Settings > Build & deploy > Build environment variables, for production.
      </p>
      <p>
        Note: environment variables get baked into your function at deploy
        time, so you need to trigger a new deploy after you change them.
      </p>
      <pre class="language-js"><code><%= require('html-loader!./lambda/hello_env.js') %></code></pre>
      <h3>Try it out</h3>
      <p>
        <a href="/.netlify/functions/hello_env">Show me the environment variable</a>
      </p>
    </article>

    <article>
      <h2>Fetch</h2>
      <p>I see you like APIs! I’ll put an API in your API so you can API while you API.</p>
      <pre class="language-js"><code><%= require('html-loader!./lambda/hello_fetch.js') %></code></pre>
      <h3>Try it out</h3>
      <p>
        <a href="/.netlify/functions/hello_fetch">Tell me a joke!</a>
      </p>
    </article>

    <article>
      <h2>Send a Slack message</h2>
      <p>
        Putting it all together: send a message to a Slack channel.
      </p>
      <p>
        You’ll need a <a href="https://slack.com">Slack</a> account to replicate
        this example on your own site (if you don’t already have a Slack account,
        you can <a href="https://slack.com/get-started">create one</a> for free).
      </p>
      <ol>
        <li>
          <p>
            Create a Slack incoming webhook at
            <a href="https://my.slack.com/services/new/incoming-webhook/">
              https://my.slack.com/services/new/incoming-webhook/
            </a>
          </p>
        </li>
        <li>
          <p>
            To test the function locally, add the Slack webhook URL to the .env
            file in the root folder of your repository.
          </p>
          <pre class="language-bash"><code>SLACK_WEBHOOK_URL=https://hooks.slack.com/services/XXXXXXXXXX</code></pre>
        </li>
        <li>
          <p>
            To test the function in your deployed site, sign in to your
            <a href="https://app.netlify.com">Netlify dashboard</a>,
            add the environment variable to your site’s
            Settings > Build & Deploy > Build environment variables, and trigger
            a new deploy.
          </p>
        </li>
      </ol>
      <pre class="language-js"><code><%= require('html-loader!./lambda/hello_slack.js') %></code></pre>
      <h3>Try it out</h3>
      <form action="/.netlify/functions/hello_slack" method="POST">
        <p>
          <label>What’s your name?<br/><input type="text" name="name"></label>
        </p>
        <p><button type="submit">Say hello!</button></p>
      </form>
    </article>

    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.14.0/prism.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>
